<template>
  <view class="list">
    <view
      class="fixbg"
      :style="{ 'background-image': 'url(' + playList.coverImgUrl + ')' }"
    ></view>
    <musicHead title="歌单" icon="true" color="white"></musicHead>
    <view class="container" v-if="!isLoding">
      <scroll-view scroll-y="true">
        <view class="list-head">
          <view class="list-head-img">
            <image :src="playList.coverImgUrl" mode="" />
            <text class="iconfont icon-yousanjiao">{{
              playList.playCount | formatCount
            }}</text>
          </view>
          <view class="list-head-text">
            <view>{{ playList.name }}</view>
            <view
              ><image :src="playList.creator.avatarUrl" mode="" />{{
                playList.creator.nickname
              }}</view
            >
            <view>{{ playList.creator.signature }}</view>
          </view>
        </view>

        <!-- #ifdef MP-WEIXIN -->
        <button class="list-share" open-type="share">
          <text class="iconfont"></text>分享给微信好友
        </button>
        <!-- #endif -->

        <view class="list-music">
          <view class="list-music-head">
            <text class="iconfont icon-yunhang"></text>
            <view>播放全部</view>
            <view>(共{{ playList.trackCount }}首)</view>
          </view>
          <view
            class="list-music-item"
            v-for="(item, index) in playList.tracks"
            :key="item.id"
            @tap="goToMusicDetail(item.id)"
          >
            <view>{{ index + 1 }}</view>
            <view>
              <view>{{ item.name }}</view>
              <view>
                <image
                  src="../../static/vip.png"
                  mode=""
                  v-if="privileges[index].fee == 1"
                ></image>
                <image
                  v-if="(privileges[index].maxbr || '') == 999000"
                  src="../../static/sq.png"
                  mode=""
                /><image
                  v-if="
                    privileges[index].flag > 60 && privileges[index].flag < 60
                  "
                  src="../../static/dujia.png"
                  mode=""
                />{{ item.ar[0].name }}--{{ item.name }}</view
              >
            </view>
            <text class="iconfont icon-bofang"></text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getPlayList } from "@/api/index.js";
export default {
  data() {
    return {
      playList: {
        coverImgUrl: "",
        name: "",
        description: "",
        trackCount: 0,
        creator: {
          avatarUrl: "",
        },
        tracks: [],
      },
      privileges: [],
      isLoding: true,
    };
  },

  methods: {
    async getPlayListData(id) {
      try {
        let data = await getPlayList(id);
        this.privileges = data.privileges || [];
        this.isLoding = !this.isLoding;
        Object.assign(this.playList, data.playlist);
        console.log(this.playList);
        this.$store.commit("Detail/GET_SONGLIST", data.playlist.trackIds);
        console.log(data.playlist);
        // 调用方法存储
      } catch (error) {
      } finally {
        uni.hideLoading();
      }
    },

    goToMusicDetail(id) {
      uni.redirectTo({
        url: `/pages/musicDetail/index?id=${id}`,
      });
    },
  },
  onLoad(params) {
    const { id } = params;
    console.log(id);
    uni.showLoading({
      title: "Loading...",
    });
    this.getPlayListData(id);
  },
};
</script>

<style lang="less">
.list-head {
  display: flex;
  margin: 80rpx 30rpx;
  .list-head-img {
    position: relative;
    width: 264rpx;
    height: 264rpx;
    border-radius: 30rpx;
    margin-right: 24rpx;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
    text {
      position: absolute;
      right: 10rpx;
      top: 10rpx;
      color: white;
      font-size: 26rpx;
    }
  }

  .list-head-text {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    color: rgb(255, 255, 255, 0.7);
    view:nth-child(1) {
      //   color: #000000;
      font-size: 34rpx;
    }
    view:nth-child(2) {
      display: flex;
      align-items: center;
      margin: 20rpx 0rpx;
      font-size: 24rpx;
      image {
        width: 54rpx;
        height: 54rpx;
        border-radius: 50%;
        margin-right: 14rpx;
      }
    }
    view:nth-child(3) {
      display: -webkit-box; /*弹性伸缩盒子模型显示*/
      -webkit-box-orient: vertical; /*排列方式*/
      -webkit-line-clamp: 2; /*显示文本行数(这里控制多少行隐藏)*/
      overflow: hidden; /*溢出隐藏*/
      text-overflow: ellipsip; /*溢出显示省略号*/

      font-size: 24rpx;
    }
  }
}

.list-share {
  width: 386rpx;
  height: 78rpx;
  margin: 30rpx auto 0rpx;
  border-radius: 78rpx;
  line-height: 78rpx;
  background-color: rgba(0, 0, 0, 0.3);
  text {
    text-align: center;
    font-size: 32rpx;
  }
}

.list-music {
  display: flex;
  flex-wrap: wrap;
  margin: 50rpx 0rpx;
  background-color: white;
  border-top-left-radius: 60rpx;
  border-top-right-radius: 60rpx;

  .list-music-head {
    display: flex;
    margin: 30rpx 30rpx;
    align-items: center;
    text {
      font-size: 72rpx;
    }
    view:nth-of-type(1) {
      margin-left: 30rpx;
      margin-right: 10rpx;
      font-size: 42rpx;
    }
    view:nth-of-type(2) {
      font-size: 32rpx;
      color: #999999;
    }
  }

  .list-music-item {
    display: flex;
    width: 100%;
    // justify-content: flex-start;
    align-items: center;
    margin: 30rpx 40rpx;
    & > view:nth-child(1) {
      font-size: 42rpx;
      color: #999999;
    }
    & > view:nth-child(2) {
      display: flex;
      flex-direction: column;
      margin-left: 30rpx;

      view:nth-child(1) {
        // display: flex;
        margin-right: 20rpx;
        display: -webkit-box; /*弹性伸缩盒子模型显示*/
        -webkit-box-orient: vertical; /*排列方式*/
        -webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
        overflow: hidden; /*溢出隐藏*/
        text-overflow: ellipsip; /*溢出显示省略号*/
        font-size: 32rpx;
      }
      view:nth-child(2) {
        image {
          width: 35rpx;
          height: 25rpx;
          margin-right: 5rpx;
        }
        flex: 1;
        margin-right: 20rpx;
        display: -webkit-box; /*弹性伸缩盒子模型显示*/
        -webkit-box-orient: vertical; /*排列方式*/
        -webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
        overflow: hidden; /*溢出隐藏*/
        text-overflow: ellipsip; /*溢出显示省略号*/
        color: #999999;
      }
    }

    text {
      margin-left: auto;
      font-size: 58rpx;
      color: #999999;
    }
  }
}
</style>